<template>
<div>
<div class="main" id = "part1" style="margin-left:100px; height:80vh;width:100vh">  </div> 
<div class="main" id = "part2" style="margin-left:100px; height:80vh;width:100vh">  </div> 
<div class="main" id = "part3" style="margin-left:10px; height:80vh;width:200vh">  </div> 
</div>

<!-- <el-row :gutter="40">
<el-col :span="10"><div id="part1" style="height:120vh;width:200vh"></div></el-col>
<el-col :span="10"><div id="part2" style="height:120vh;width:200vh"></div></el-col>
<el-col :span="20"><div id="part3" style="height:120vh;width:200vh"></div></el-col>
</el-row> -->
</template>

<script>

import * as echarts from 'echarts'

export default{

data(){
	return {
		result:'testtest',
		nima:"123"
	}
	
},

mounted(){
// this.demo()
this.part1()
this.part2()
this.part3()
},

methods:{
demo()
{
var chartDom = document.getElementById('part1');
var myChart = echarts.init(chartDom);
var option;
	
option = {
  dataset: [
    {
      dimensions: ['name', 'age', 'profession', 'score', 'date'],
      source: [
        ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
        ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
        ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
        ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
        ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
        ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
        ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
        ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
        ['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
      ]
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'score', order: 'desc' }
      }
    }
  ],
  xAxis: {
    type: 'category',
    axisLabel: { interval: 0, rotate: 30 }
  },
  yAxis: {},
  series: {
    type: 'bar',
    encode: { x: 'name', y: 'score' },
    datasetIndex: 1
  }
};

option && myChart.setOption(option);
},


async groupCat()
{
  	let result;
 	await this.$api.carinfo.groupCategory().then(
	(res) => {
	  result =res
  })
   return result;
 },

async groupMan()
{
  	let result;
 	await this.$api.carinfo.groupManufacturer().then(
	(res) => {
	  result =res
  })
   return result;
 },

 async staticInfo()
{
  	let result;
 	await this.$api.inventory.staticinfo().then(
	(res) => {
	  result =res
  })
   return result;
 },

async part1(){
	let data = await this.groupCat()
	console.log(data)

	var category = new Array();
	var num  = new Array();

	for (let index = 0; index < data.length; index++) {
		// category.push(array[index]);
		const element = data[index];
		category.push(element['category']);
		num.push(element['num']);
	}

	var chartDom = document.getElementById('part1');
	var myChart = echarts.init(chartDom);
	var option;	
	option = {
	
	grid: {
        width: "300px",
        height: "300px",
        containLabel: true
    },

	xAxis: {
		  axisLabel: {
        fontSize:25,
		interval:0,
      },
		name: '汽车配件信息种类',
		type: 'category',
		data: category
	},
	yAxis: {
		name: '个数',
		type: 'value'
	},
	series: [
		{
		data: num,
		type: 'bar'
		}
 	 ]
	};
	option && myChart.setOption(option);
},


async part2()
{
	let data = await this.groupMan()
	console.log(data)
	var result = new Array();

	for (let index = 0; index < data.length; index++) {
		// category.push(array[index]);
		let element = {"name": data[index]['manufacturer'], "value": data[index]['num']}
		result.push(element);
	}

	var chartDom = document.getElementById('part2');
	var myChart = echarts.init(chartDom);
	var option;	

	console.log(result);

option = {
		grid: {
        width: "370px",
        height: "300px",
        containLabel: true
		},
  title: {
    text: '汽车信息厂商分布图',
    subtext: '数据展示',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '配件厂商',
      type: 'pie',
      radius: '50%',
      data: result,
	  fontSize:30,
	     label:{
        fontSize:20,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
	option && myChart.setOption(option);
},


async part3()
{
	let data = await this.staticInfo()
	console.log(data)
	var cname = new Array();
	var num_inbound = new Array();
	var num_outbound = new Array();
	for (let index = 0; index < data.length; index++) {
		let element = data[index];
	    cname.push(element['cname']);
		num_inbound.push(element['num_inbound']);
		num_outbound.push(element['num_outbound']);
	}

	var chartDom = document.getElementById('part3');
	var myChart = echarts.init(chartDom);
	var option;	

	console.log(cname)
option = {
  grid:{
	  y2:200,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
	  axisLabel: {
        fontSize:25,
		interval:0,
		rotate:-30,
      },
	  nameGap:20,
	  fontSize:25,
	  name: "配件名称",
      data: cname,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '数量',
	  fontSize:25,
      min: 0,
      max: 20,
      interval: 5,
      axisLabel: {
	   fontSize:25,
        formatter: '{value} 个'
      }
    },
  ],
  series: [
    {
      name: '出库',
      type: 'bar',
      data: num_outbound,
    },
    {
      name: '入库',
      type: 'bar',
      data: num_inbound,
    },

  ]
};



	option && myChart.setOption(option);
},


}

}

</script>
<style scoped>
.menu-container {
	margin-top: 10px;
}
.menu-header {
	padding-left: 8px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 16px;
	color: rgb(20, 89, 121);
	
}
</style>